<template>
  <div style="padding: 6px;">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="车型" prop="carType">
        <el-input style="width: 130px" v-model="queryParams.carType" placeholder="输入车型" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="车牌号" prop="carNo">
        <el-input style="width: 150px" v-model="queryParams.carNo" placeholder="请输入车牌号" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="选择日期" prop="searchDate">
        <el-date-picker style="width: 150px" v-model="queryParams.searchDate" type="date" placeholder="选择日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <table class="mytable">
      <tr>
        <th style="width: 7%;padding: 0 5px"></th>
        <td style="width: 93%;padding: 0 5px">
          <IraTimeKeDu />
        </td>
      </tr>
    </table>
    <div class="neirong">
      <table class="mytable">
        <tr v-for="item in carList" :key="item.id">
          <th style="width: 7%"><span v-html="item.carNo"></span></th>
          <td style="width: 93%">
            <IraTimeLine :timeLineLists="item.timeLineLists" :textLineLists="item.textLineLists"/>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import IraTimeLine from "@/components/IraTimeLine"
import IraTimeKeDu from '@/components/IraTimeKeDu'
import request from '@/utils/request'
import dayjs from 'dayjs'
export default {
  components: {IraTimeLine, IraTimeKeDu},
  data(){
    return{
      queryParams:{
        carNo:'',
        searchDate: dayjs().format("YYYY-MM-DD"),
      },
      carList : [],
      isMobile : this.$device.mobile
    }
  },
  mounted() {
    this.getCarTimeLine();
  },
  methods:{
    handleQuery(){
      this.getCarTimeLine();
    },
    getCarTimeLine(){
      if(!this.queryParams.searchDate){
        this.$message("请输入日期查询")
        return
      }
      request({
        url: '/car/listallcar',
        data : this.queryParams,
      }).then(res => {
        const { data } = res
        this.carList = data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-form-item--small.el-form-item{
  margin-bottom: 6px;
}
div.neirong{
  width: 100%;
  height: 88vh;
  overflow: auto;
  white-space: pre-line;
}
div.neirong::-webkit-scrollbar{
  width:1px;
  height:8px;
  background-color: #cccccc;
}
div.neirong::-webkit-scrollbar-track{
  background: #eee;
}
div.neirong::-webkit-scrollbar-thumb{
  background: #cccccc;
  border-radius:100px;
}
div.neirong::-webkit-scrollbar-thumb:hover{
  background: #cccccc;
}
div.neirong::-webkit-scrollbar-corner{
  background: #cccccc;
}

table.mytable{
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  text-align: left;
  table-layout: fixed;
  font-size: 12px;
}
table.mytable td, table.mytable th {
  border: 1px solid #ececec;
  word-break: break-all;
  word-wrap: break-word;
  text-indent: 2px;
  padding: 5px;
}
table.mytable th{
  background: #f5f7fa;
  font-weight: 800;
  color: #333333;
  text-align: center;
}
table.mytable td{
  background:none;
}
</style>
